<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="assets/css/default.css" rel="stylesheet">
<link href="assets/css/openContent.css" rel="stylesheet">
<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
<script type="text/javascript" src="assets/js/jindo_component.js"></script>
<script type="text/javascript" src="assets/js/jindo_mobile_component.js"></script>
<title>네이버 UX::반응형 웹</title>
</head>
<body>
	<!--  --------------- main header 레이아웃 ---------------  -->
	<header class="main-header">
		<a class="home-link" href=""> 
			<img class="logo-img" alt="네이버 UX::반응형 웹" src="assets\img\logo.png">
		</a>
		<form class="search" id="search" action="http://search.naver.com/search.naver">
			<input class="search-text" type="text" id="query" placeholder="네이버 통합검색"> 
			<input class="search-submit" type="submit" onclick= "search();" value="">
		</form>
		<ul class="content-navi">
			<li onclick="controller('home')">홈</li>
			<li onclick="controller('news')">뉴스</li>
			<li onclick="controller('dic')">사전</li>
			<li onclick="controller('me')">서비스</li>
			<li onclick="controller('beta')">유아교육</li>
		</ul>
		<button onclick="openContent('http://map.naver.com')">dialog test</button>
	</header>
	<!--  --------------- main container 레이아웃 ---------------  -->
	<section class="main-container">
		<section id="mainContainer">
			<section class="tile-container">
				<ul class="tile-ct" id="homeContainer">
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
					<li>home</li>
				</ul>
				<ul class="tile-ct" id="newsContainer">
					<li>news</li>
				</ul>
				<ul class="tile-ct" id="dicContainer">
					<li>dic</li>
				</ul>
				<ul class="tile-ct" id="meContainer">
					<li>me</li>
				</ul>
				<ul class="tile-ct" id="betaContainer">
					<li>beta</li>
				</ul>
			</section>
		</section>
	</section>
	<!--  --------------- sub container 레이아웃 ---------------  -->
	<section class="sub-container">
		<section id="subContainer">
			<section class="content-container">
				<ul class="content-ct" id="homeSub">
					<li>home</li>
				</ul>
				<ul class="content-ct" id="newsSub">
					<li>news</li>
				</ul>
				<ul class="content-ct" id="dicSub">
					<li>dic</li>
				</ul>
				<ul class="content-ct" id="meSub">
					<li>me</li>
				</ul>
				<ul class="content-ct" id="betaSub">
					<li>beta</li>
				</ul>
			</section>
		</section>
	</section>
	<!--  --------------- java script 시작----------------  -->
	<script type="text/javascript" src="assets/js/openContent.js"></script>
	<script type="text/javascript">
	
		var mainFlicking = new jindo.m.Flicking('mainContainer', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'tile-', //Class의 prefix
			nDefaultIndex : 0, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "slide" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(sss) {
			}
		});
		var subFlicking = new jindo.m.Flicking('subContainer', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'content-', //Class의 prefix
			nDefaultIndex : 0, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "slide" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(sss) {
			}
		});
	</script>
</body>
</html>